import SectionCard from '../SectionCard';
import s from './index.module.scss'

const bases = [
  {name: '闭包', tip: 'useEffect，useCallback，闭包陷阱'},
  {name: 'Event Loop', tip: '重绘次数、执行时机、性能优化'},
  {name: '不可变数据', tip: '内存、引用类型、性能瓶颈'},
]

export default function Sction1() {

  return (
    <SectionCard 
      title="深挖基础，了然于心"
      desc='以扎实的基础为依托，对各种 React 语法有更加深刻的认识'
      bgcolor='#f6f8ff'
    >
      {bases.map((base) => (
        <div className={s.base} key={base.name}>
          <div className={s.container}>
            <div className={s.top}></div>
            <div className={s.name}>{base.name}</div>
            <div className={s.tip}>{base.tip}</div>
          </div>
        </div>
      ))}
    </SectionCard>
  )
}